<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Dominion Helper</title>
	<link rel="stylesheet" href="css/dominion.css" type="text/css">
	<link rel="stylesheet" href="css/jquery.qtip.css" type="text/css">
	<script type="text/javascript" src="min/js/dominion-helper.js"></script>
	<script type="text/javascript" src="js/jquery.qtip.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			/*DOMINION_CARDS.forEach(function(value, index, array) {
				var html = array[index].toHTML();
				$("#playarea").append(html);
			});
			//*/

			//Bind player events
			//onDraw
			$("#player_events").bind("onDraw", function(e, player, card) {
				$("#p"+player+"_hand").append(card.toHTML());
			});

			//onDeckChanged
			$("#player_events").bind("onDeckChanged", function(e, player, size) {
				if(size > 0) {
					$("#p"+player+"_deck").html('<img src="images/cards/card-back.jpg"/>');
				} else {
					$("#p"+player+"_deck").empty();
				}
			});

			//onDiscard
			$("#player_events").bind("onDiscard", function(e, player, card) {
				$("#p"+player+"_discard").html(card.toHTML());
			});

			//onNewPlayer
			$("#player_events").bind("onNewPlayer", function(e, player, name, actions, money, buys) {
				//Name
				$("#p"+player+"_name").html(name);

				//Resource display
				$("#p"+player+"_actions_count").html(actions);
				$("#p"+player+"_money_count").html(money);
				$("#p"+player+"_buys_count").html(buys);
			});

			//onNewSupply
			$("#player_events").bind("onNewSupply", function(e, pileIndex, pile) {
				if(pile.type == CardTypes.KINGDOM ) {
					$("#kingdom_"+pileIndex).html(pile.card.toHTML());
				} else {
					$("#otherSupply").append(pile.card.toHTML());
				}
			});

			//Simulate each player drawing a full hand
			var game = new Game();
			game.addPlayer(new Player(1, "Joe"));
			game.addPlayer(new Player(2, "Rii Bandahai"));
			game.addPlayer(new Player(3, "Dabrickashaw"));
			game.addPlayer(new Player(4, "Rick Astley"));

			//Assign full-size card tooltips
			$(".card > img").each(function() {
				$(this).qtip({
					content: {
						text: '<img src="' + $(this).attr('src') + '" />'
					},
					style: {
                        classes: 'ui-tooltip-shadow ui-tooltip-dark',
						width: '200px'
					},
					position: {
						my: 'left bottom',
						at: 'right top',
						target: 'mouse',
						viewport: $(window)
					},
					show: 'mouseover',
					hide: 'mouseout'
				});
			});//*/
		});
	</script>
</head>
<body>
	<div id="player_events"></div>
	<div id="trash"></div>
    <div id="playarea">
	    <div id="supply">
			<div id="kingdom_0" class="kingdom"></div>
		    <div id="kingdom_1" class="kingdom"></div>
			<div id="kingdom_2" class="kingdom"></div>
			<div id="kingdom_3" class="kingdom"></div>
			<div id="kingdom_4" class="kingdom"></div>
			<div id="kingdom_5" class="kingdom"></div>
			<div id="kingdom_6" class="kingdom"></div>
			<div id="kingdom_7" class="kingdom"></div>
			<div id="kingdom_8" class="kingdom"></div>
			<div id="kingdom_9" class="kingdom"></div>
		    <div id="otherSupply">
			    
		    </div>
		</div>
	    <div id="p3_playfield">
			<div id="p3_hand" class="hand"></div>
			<div id="p3_deck" class="deck"></div>
			<div id="p3_discard" class="discard"></div>
			<div id="p3_inplay" class="inplay"></div>
		    <div id="p3_name" class="name"></div>
		    <div id="p3_resources" class="resources">
				<div id="p3_actions" class="actions">
					<div id="p3_actions_label" class="actionsLabel">Actions:&nbsp;</div>
					<div id="p3_actions_count" class="actionsCount"></div>
				</div>
				<div id="p3_money" class="money">
					<div id="p3_money_label" class="moneyLabel">Money: </div>
					<div id="p3_money_count" class="moneyCount"></div>
				</div>
				<div id="p3_buys" class="buys">
					<div id="p3_buys_label" class="buysLabel">Buys: </div>
					<div id="p3_buys_count" class="buysCount"></div>
				</div>
			</div>
		</div>
	    <div id="p2_playfield">
			<div id="p2_hand" class="hand"></div>
			<div id="p2_deck" class="deck"></div>
			<div id="p2_discard" class="discard"></div>
			<div id="p2_inplay" class="inplay"></div>
		    <div id="p2_name" class="name"></div>
		    <div id="p2_resources" class="resources">
				<div id="p2_actions" class="actions">
					<div id="p2_actions_label" class="actionsLabel">Actions: </div>
					<div id="p2_actions_count" class="actionsCount"></div>
				</div>
				<div id="p2_money" class="money">
					<div id="p2_money_label" class="moneyLabel">Money: </div>
					<div id="p2_money_count" class="moneyCount"></div>
				</div>
				<div id="p2_buys" class="buys">
					<div id="p2_buys_label" class="buysLabel">Buys: </div>
					<div id="p2_buys_count" class="buysCount"></div>
				</div>
			</div>
		</div>
	    <div id="p4_playfield">
			<div id="p4_hand" class="hand"></div>
			<div id="p4_deck" class="deck"></div>
			<div id="p4_discard" class="discard"></div>
			<div id="p4_inplay" class="inplay"></div>
		    <div id="p4_name" class="name"></div>
		    <div id="p4_resources" class="resources">
				<div id="p4_actions" class="actions">
					<div id="p4_actions_label" class="actionsLabel">Actions: </div>
					<div id="p4_actions_count" class="actionsCount"></div>
				</div>
				<div id="p4_money" class="money">
					<div id="p4_money_label" class="moneyLabel">Money: </div>
					<div id="p4_money_count" class="moneyCount"></div>
				</div>
				<div id="p4_buys" class="buys">
					<div id="p4_buys_label" class="buysLabel">Buys: </div>
					<div id="p4_buys_count" class="buysCount"></div>
				</div>
			</div>
		</div>
	    <div id="p1_playfield">
			<div id="p1_hand" class="hand"></div>
			<div id="p1_deck" class="deck"></div>
			<div id="p1_discard" class="discard"></div>
			<div id="p1_inplay" class="inplay"></div>
		    <div id="p1_name" class="name"></div>
		    <div id="p1_resources" class="resources">
				<div id="p1_actions" class="actions">
					<div id="p1_actions_label" class="actionsLabel">Actions: </div>
					<div id="p1_actions_count" class="actionsCount"></div>
				</div>
				<div id="p1_money" class="money">
					<div id="p1_money_label" class="moneyLabel">Money: </div>
					<div id="p1_money_count" class="moneyCount"></div>
				</div>
				<div id="p1_buys" class="buys">
					<div id="p1_buys_label" class="buysLabel">Buys: </div>
					<div id="p1_buys_count" class="buysCount"></div>
				</div>
			</div>
		</div>
    </div>
</body>
</html>